<template>
  <n-card>
    <div>
      <n-h3>Vue Admin Work P目前是收费版本，价格是：{{state.price}}（比市面上价格都要低）您可以进行以下操作：</n-h3>
      <n-ul>
        <n-li>如果您还未获取授权，请先添加客服进行授权
          <n-popover
            trigger="hover"
            placement="right"
          >
            <template #trigger>
              <n-button
                size="tiny"
                type="primary"
              >获取授权</n-button>
            </template>
            <div>
              <img
                :src="Custom"
                style="width: 300px;"
              />
            </div>
          </n-popover>
        </n-li>
        <n-li>如果您已经获取授权，如果没有收到文档，请添加客服进行获取
          <n-popover
            trigger="hover"
            placement="right"
          >
            <template #trigger>
              <n-button
                size="tiny"
                type="warning"
              >获取文档</n-button>
            </template>
            <div>
              <img
                :src="Custom"
                style="width: 300px;"
              />
            </div>
          </n-popover>
        </n-li>
        <n-li>如果您想使用其它免费开源版本，请 <n-button
            size="tiny"
            type="success"
            @click="onOpenSource"
          >点击这里</n-button>
        </n-li>
      </n-ul>
    </div>
  </n-card>
</template>

<script lang="ts" setup>
import { NH3, NCard, NUl, NLi, NPopover, NButton } from 'naive-ui'
import { inject } from 'vue'
import { useRouter } from 'vue-router'
import Custom from '../assets/custom_weixin.jpg'
const router = useRouter()
function onOpenSource() {
  router.push('/permission')
}
const state = inject('state') as any
</script>
